:host {
  background-color: var(--color-primary);

  @media only screen and (max-width: 600px) {
    .home-button {
      padding-left: 0 !important;
    }
  }

  ::ng-deep {
    button {
      max-height: 100%;
      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
      .mat-button-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      app-logo > span.version {
        bottom: -10px;
        transform: scale(.6);
        right: -6px;
      }
    }

    nav,
    .mat-mdc-tab-links,
    .mat-mdc-tab-nav-bar.mat-background-primary .mat-tab-link {
      height: 100%;
    }

    nav {
      width: max-content;
      height: 56px;
    }

    ng-scrollbar {
      --scrollbar-padding: 0;
      --scrollbar-border-radius: 0;
      flex: 1;
      height: 100%;
    }
  }
}

.mat-toolbar {
  z-index: 999;
  position: relative;
}

app-logo {
  width: 40px;
  height: 40px;
  margin-right: 5px;
}

.mat-toolbar-single-row {
  height: 56px;
}

.mat-mdc-tab-link {
  min-width: 60px;
}

.github-repo {
  img {
    height: 26px;
    margin: 0 4px 3px 0;
  }
}
